<template>
    <div>
        <div class="tableHeader">
            <div class="tableHeaderTitle">栏目列表</div>
            <div class="tableHeaderMenu">
                <el-button-group>
                    <el-button icon="el-icon-arrow-left" @click="goBackNode" size="mini"></el-button>
                    <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
                </el-button-group>
            </div>
        </div>

        <el-table ref="multipleTable" :data="nodeData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cc_name" label="栏目名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cc_url" label="栏目链接URL"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cc_order" label="排序"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="是否显示">
                <template slot-scope="scope">
                    <div v-if="scope.row.cc_is_show == 0">是</div>
                    <div v-else>否</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" @click="getNodeData(scope.row.cc_id)">查看子节点</el-button>
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                lastFid: 0,
                nodeDataArr: []
            }
        },
        //初始化函数
        mounted() {
            this.initData();
        },
        //计算属性
        computed: {
            ...mapState({
                columnData: state => state.ColumnListModule.columnData
            }),
            nodeData() {
                return this.nodeDataArr;
            }
        },
        //组件方法
        methods: {
            initData() {
                this.$myLoading.startLoading();
                this.$http.getHttp(
                    this.$API.cmsColumnSearch + "/skip/0/limit/1000/cc_is_delete/0",
                    rs => {
                        console.log(rs);
                        this.$myLoading.endLoading();
                        this.$store.commit("ColumnListModule/updateColumnData", rs.data);
                        this.getNodeData(0, 0);
                    }
                );
            },

            goBackNode() {
                if (this.lastFid == -1) {
                    this.$myPop.WarningMessage("该菜单已经是顶级菜单了，无法继续返回");
                    return;
                }
                this.getNodeData(this.lastFid);
            },
            getNodeData(fid) {

                if (fid == 0) {
                    this.lastFid = -1;
                } else {
                    //根据当前节点查询父节点ID
                    this.columnData.forEach(item => {
                        if (item.cc_id == fid) {
                            this.lastFid = item.cc_fid;
                            return;
                        }
                    });
                }

                //筛选满足条件的节点信息
                this.nodeDataArr = this.columnData.filter(item => {
                    return item.cc_fid == fid;
                });
            },
            refreshData() {
                this.initData();
            },
            handleEdit(index, item) {
                this.$router.push({
                    path: "/editColumn",
                    query: {
                        cc_id: item.cc_id
                    }
                });
            },
            handleDelete(index, item) {
                var params = {
                    cc_id: item.cc_id,
                };
                this.$myPop.confirmBox("确认操作", "确定要删除该栏目吗？", () => {
                    this.$myLoading.startLoading();
                    this.$http.postHttp(this.$API.cmsColumnDelete, params, rs => {
                        this.$myLoading.endLoading();
                        this.$myPop.SuccessMessage();
                        this.initData();
                    });
                });
            }
        },
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
</style>